<template>
  <div v-if="show" class="modal-backdrop" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>{{ isEditing ? '编辑用户' : '用户详情' }}</h3>
        <button @click="closeModal" class="close-btn">×</button>
      </div>

      <div class="modal-body">
        <!-- 标签页导航 -->
        <div class="modal-tabs" v-if="!isNewUser">
          <button 
            @click="activeTab = 'info'" 
            :class="{ active: activeTab === 'info' }"
            class="tab-btn"
          >
            {{ isEditing ? '基本信息' : '用户信息' }}
          </button>
          <button 
            @click="activeTab = 'permissions'" 
            :class="{ active: activeTab === 'permissions' }"
            class="tab-btn"
            v-if="canManageUserPermissions"
          >
            权限管理
          </button>
        </div>

        <!-- 基本信息标签页 -->
        <div v-if="activeTab === 'info'">
          <div v-if="!isEditing" class="user-detail-view">
          <!-- 用户基本信息 -->
          <div class="info-section">
            <h4>基本信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <label>用户名</label>
                <span>{{ user.username }}</span>
              </div>
              <div class="info-item">
                <label>用户ID</label>
                <span>{{ user.id }}</span>
              </div>
              <div class="info-item">
                <label>角色</label>
                <span :class="['role-badge', user.role]">{{ getRoleText(user.role) }}</span>
              </div>
              <div class="info-item">
                <label>注册时间</label>
                <span>{{ formatDate(user.createdAt) }}</span>
              </div>
              <div class="info-item">
                <label>权限数量</label>
                <span>{{ (user.permissions || []).length }}</span>
              </div>
              <div class="info-item">
                <label>密码状态</label>
                <div class="password-status">
                  <span class="status-active">已设置</span>
                  <button @click="resetPassword" class="reset-password-btn" v-if="canResetPassword">
                    重置密码
                  </button>
                </div>
              </div>
              <div class="info-item">
                <label>状态</label>
                <span class="status-active">活跃</span>
              </div>
            </div>
          </div>

          <!-- 用户权限 -->
          <div class="info-section" v-if="user.permissions && user.permissions.length > 0">
            <h4>用户权限</h4>
            <div class="permissions-list">
              <span 
                v-for="permission in user.permissions" 
                :key="permission"
                class="permission-tag"
                :class="getPermissionClass(permission)"
              >
                {{ getPermissionText(permission) }}
              </span>
            </div>
          </div>
        </div>

        <div v-else class="user-edit-form">
          <form @submit.prevent="saveUser">
            <div class="form-group">
              <label for="username">用户名 *</label>
              <input 
                v-model="editForm.username" 
                id="username"
                type="text" 
                required 
                :disabled="!isNewUser"
                placeholder="请输入用户名"
              />
              <small v-if="!isNewUser" class="form-hint">现有用户的用户名无法修改</small>
            </div>

            <div class="form-group" v-if="isNewUser || showPasswordFields">
              <label for="password">{{ isNewUser ? '密码 *' : '新密码' }}</label>
              <input 
                v-model="editForm.password" 
                id="password"
                type="password" 
                :required="isNewUser"
                :placeholder="isNewUser ? '请输入密码' : '留空则不修改密码'"
              />
            </div>

            <div class="form-group" v-if="isNewUser || showPasswordFields">
              <label for="confirmPassword">{{ isNewUser ? '确认密码 *' : '确认新密码' }}</label>
              <input 
                v-model="editForm.confirmPassword" 
                id="confirmPassword"
                type="password" 
                :required="isNewUser"
                :placeholder="isNewUser ? '请再次输入密码' : '请再次输入新密码'"
              />
            </div>

            <div class="form-group" v-if="!isNewUser && !showPasswordFields">
              <label>密码管理</label>
              <button 
                type="button"
                @click="togglePasswordFields" 
                class="change-password-btn"
              >
                修改密码
              </button>
            </div>

            <div class="form-group">
              <label for="role">角色 *</label>
              <select v-model="editForm.role" id="role" required>
                <option value="">请选择角色</option>
                <option value="user">普通用户</option>
                <option value="admin">管理员</option>
              </select>
            </div>

          </form>
        </div>
        </div>

        <!-- 权限管理标签页 -->
        <div v-if="activeTab === 'permissions' && !isNewUser" class="permissions-tab">
          <div class="permissions-header">
            <h4>用户权限设置</h4>
            <div class="permission-summary">
              <span class="current-permissions">当前权限: {{ userPermissions.length }}</span>
              <div class="permission-actions">
                <button @click="selectAllPermissions" class="action-btn select-all">全选</button>
                <button @click="clearAllPermissions" class="action-btn clear-all">清空</button>
                <button @click="resetUserPermissions" class="action-btn reset" :disabled="!hasPermissionChanges">重置</button>
                <button @click="saveUserPermissions" class="action-btn save" :disabled="!hasPermissionChanges">保存权限</button>
              </div>
            </div>
          </div>

          <div class="permissions-content">
            <div class="role-info">
              <h5>角色默认权限: {{ getRoleText(user.role) }}</h5>
              <div class="role-permissions">
                <span 
                  v-for="permission in getRoleDefaultPermissions(user.role)" 
                  :key="'role-' + permission"
                  class="permission-tag role-permission"
                >
                  {{ getPermissionText(permission) }}
                </span>
              </div>
            </div>

            <div class="custom-permissions">
              <h5>自定义权限</h5>
              <div class="permission-groups">
                <div v-for="(permissions, groupName) in permissionGroups" :key="groupName" class="permission-group">
                  <h6>{{ groupName }}</h6>
                  <div class="permission-checkboxes">
                    <label 
                      v-for="permission in permissions" 
                      :key="permission"
                      class="permission-checkbox"
                      :class="{ 'permission-active': hasUserPermission(permission) }"
                    >
                      <input 
                        type="checkbox" 
                        :value="permission"
                        v-model="userPermissions"
                      />
                      <span class="checkbox-label">{{ getPermissionText(permission) }}</span>
                      <span class="permission-status" v-if="hasUserPermission(permission)">✓</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div v-if="!isEditing" class="view-actions">
          <button @click="startEditing" class="edit-btn" v-if="canEditUser">编辑</button>
          <button @click="closeModal" class="cancel-btn">关闭</button>
        </div>
        <div v-else class="edit-actions">
          <button @click="saveUser" class="save-btn" :disabled="!canSaveUser">
            {{ isNewUser ? '创建用户' : '保存修改' }}
          </button>
          <button @click="cancelEditing" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import authAPI from '@/utils/authAPI';
import { PERMISSION_GROUPS, ROLES, PERMISSION_DESCRIPTIONS } from '@/utils/permissions';

export default {
  name: 'UserDetailModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    user: {
      type: Object,
      default: () => ({})
    },
    isNewUser: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isEditing: false,
      isLoading: false,
      error: "",
      activeTab: 'info',
      showPasswordFields: false,
      editForm: {
        username: '',
        password: '',
        confirmPassword: '',
        role: 'user',
        permissions: []
      },
      userPermissions: [], // 用户当前权限
      originalPermissions: [], // 原始权限备份
      permissionGroups: PERMISSION_GROUPS,
      roles: ROLES,
      permissionDescriptions: PERMISSION_DESCRIPTIONS,
      currentUser: null, // 添加当前用户状态
    };
  },
  async mounted() {
    // 异步获取当前用户状态
    this.currentUser = await authAPI.getCurrentUser();
    this.updatePermissions();
  },
  computed: {
    canEditUser() {
      if (!this.currentUser) return false;
      if (this.currentUser.role === 'admin') return true;
      return authAPI.hasPermission('user:update');
    },
    canResetPassword() {
      if (!this.currentUser) return false;
      if (this.currentUser.id === this.user?.id) return false; // 不能重置自己的密码
      if (this.currentUser.role === 'admin') return true;
      return authAPI.hasPermission('user:update');
    },
    canManageUserPermissions() {
      if (!this.currentUser) return false;
      if (this.isNewUser) return false; // 新用户不显示权限管理
      if (this.currentUser.id === this.user?.id) return false; // 不能管理自己的权限
      if (this.currentUser.role === 'admin') return true;
      // 普通用户不能管理管理员权限
      if (this.user?.role === 'admin') return false;
      return authAPI.hasPermission('user:update');
    },
    hasPermissionChanges() {
      if (!this.originalPermissions || !this.userPermissions) return false;
      
      if (this.userPermissions.length !== this.originalPermissions.length) return true;
      
      return !this.userPermissions.every(perm => this.originalPermissions.includes(perm)) ||
             !this.originalPermissions.every(perm => this.userPermissions.includes(perm));
    },
    canSaveUser() {
      if (this.isLoading) return false;
      
      if (this.isNewUser) {
        return this.editForm.username && 
               this.editForm.password && 
               this.editForm.confirmPassword &&
               this.editForm.password === this.editForm.confirmPassword &&
               this.editForm.role;
      } else {
        const basicInfoValid = this.editForm.username && this.editForm.role;
        
        // 如果显示密码字段，需要验证密码
        if (this.showPasswordFields) {
          if (this.editForm.password || this.editForm.confirmPassword) {
            return basicInfoValid && 
                   this.editForm.password === this.editForm.confirmPassword &&
                   this.editForm.password.length >= 6;
          }
        }
        
        return basicInfoValid;
      }
    }
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.isEditing = this.isNewUser;
        this.showPasswordFields = false;
        this.activeTab = 'info';
        this.initForm();
        this.initPermissions();
      }
    },
    user: {
      handler() {
        this.initForm();
        this.initPermissions();
      },
      immediate: true
    }
  },
  methods: {
    initForm() {
      if (this.isNewUser) {
        this.editForm = {
          username: '',
          password: '',
          confirmPassword: '',
          role: 'user',
          permissions: [] // 仅用于显示，不可编辑
        };
      } else {
        this.editForm = {
          username: this.user.username || '',
          password: '',
          confirmPassword: '',
          role: this.user.role || '',
          permissions: [...(this.user.permissions || [])] // 仅用于显示，不可编辑
        };
      }
    },

    initPermissions() {
      if (!this.user || this.isNewUser) {
        this.userPermissions = [];
        this.originalPermissions = [];
        return;
      }

      // 获取用户当前权限
      const currentPermissions = this.user.permissions || [];
      this.userPermissions = [...currentPermissions];
      this.originalPermissions = [...currentPermissions];
    },

    startEditing() {
      this.isEditing = true;
      this.initForm();
    },

    cancelEditing() {
      this.isEditing = false;
      this.showPasswordFields = false;
      this.initForm();
    },

    togglePasswordFields() {
      this.showPasswordFields = !this.showPasswordFields;
      if (this.showPasswordFields) {
        this.editForm.password = '';
        this.editForm.confirmPassword = '';
      }
    },

    async resetPassword() {
      if (!this.canResetPassword) return;

      const newPassword = prompt('请输入新密码（至少6位）:');
      if (!newPassword) return;

      if (newPassword.length < 6) {
        alert('密码长度至少为6位');
        return;
      }

      const confirmPassword = prompt('请再次输入新密码确认:');
      if (newPassword !== confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      if (!confirm(`确定要重置用户 ${this.user.username} 的密码吗？`)) {
        return;
      }

      try {
        const result = await authAPI.updateUser(this.user.id, {
          username: this.user.username,
          role: this.user.role,
          password: newPassword,
          permissions: this.user.permissions || []
        });

        if (result.success) {
          alert('密码重置成功');
          this.$emit('user-saved', result.data || result.user);
        } else {
          alert('密码重置失败: ' + result.error);
        }
      } catch (error) {
        console.error('重置密码失败:', error);
        alert('密码重置失败，请重试');
      }
    },

    async saveUser() {
      if (!this.canSaveUser) return;

      // 验证密码
      if ((this.isNewUser || this.showPasswordFields) && this.editForm.password !== this.editForm.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }

      this.isLoading = true;
      try {
        let result;
        const userData = {
          username: this.editForm.username,
          role: this.editForm.role
        };

        if (this.isNewUser) {
          userData.password = this.editForm.password;
          userData.permissions = []; // 新用户默认无自定义权限，使用角色默认权限
          result = await authAPI.createUser(userData);
        } else {
          // 编辑用户时不修改权限，保持现有权限不变
          userData.permissions = this.user.permissions || [];
          
          // 如果修改了密码
          if (this.showPasswordFields && this.editForm.password) {
            userData.password = this.editForm.password;
          }
          
          result = await authAPI.updateUser(this.user.id, userData);
        }

        if (result.success) {
          this.$emit('user-saved', result.data || result.user);
          this.closeModal();
        } else {
          alert(result.error || '操作失败');
        }
      } catch (error) {
        console.error('保存用户失败:', error);
        alert('操作失败，请重试');
      } finally {
        this.isLoading = false;
      }
    },

    closeModal() {
      this.isEditing = false;
      this.$emit('close');
    },

    formatDate(dateString) {
      if (!dateString) return '未知';
      return new Date(dateString).toLocaleString('zh-CN');
    },

    getRoleText(role) {
      const roleMap = {
        admin: '管理员',
        user: '普通用户'
      };
      return roleMap[role] || '未知';
    },

    getPermissionClass(permission) {
      const type = permission.split(':')[1];
      return `permission-${type}`;
    },

    getPermissionText(permission) {
      return this.permissionDescriptions[permission] || permission;
    },

    getRoleDefaultPermissions(role) {
      const roleKey = role === 'admin' ? 'ADMIN' : 'USER';
      return this.roles[roleKey]?.permissions || [];
    },

    hasUserPermission(permission) {
      return this.userPermissions.includes(permission);
    },

    selectAllPermissions() {
      const allPermissions = Object.values(this.permissionGroups).flat();
      this.userPermissions = [...allPermissions];
    },

    clearAllPermissions() {
      this.userPermissions = [];
    },

    resetUserPermissions() {
      this.userPermissions = [...this.originalPermissions];
    },

    async saveUserPermissions() {
      if (!this.hasPermissionChanges || !this.canManageUserPermissions) return;

      this.isLoading = true;
      try {
        const result = await authAPI.updateUserPermissions(this.user.id, this.userPermissions);
        
        if (result.success) {
          this.originalPermissions = [...this.userPermissions];
          this.$emit('user-saved', result.data || result.user);
          alert('权限保存成功');
        } else {
          alert('保存失败: ' + (result.error || '未知错误'));
        }
      } catch (error) {
        console.error('保存用户权限失败:', error);
        alert('保存失败，请重试');
      } finally {
        this.isLoading = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #2a2a2a;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #444;

  h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
  }

  .close-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: #fff;
    }
  }
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;

  .modal-tabs {
    display: flex;
    border-bottom: 1px solid #444;
    margin-bottom: 20px;

    .tab-btn {
      padding: 10px 20px;
      border: none;
      background: none;
      color: #ccc;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.3s ease;

      &:hover {
        color: #fff;
      }

      &.active {
        color: #4a90e2;
        border-bottom-color: #4a90e2;
      }
    }
  }
}

.info-section {
  margin-bottom: 25px;

  h4 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #444;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;

  label {
    color: #ccc;
    font-size: 12px;
    font-weight: bold;
  }

  span {
    color: #fff;
    font-size: 14px;
  }

  .password-status {
    display: flex;
    align-items: center;
    gap: 10px;

    .reset-password-btn {
      padding: 4px 8px;
      border: none;
      border-radius: 4px;
      background: #f39c12;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background: #e67e22;
      }
    }
  }
}

.role-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  width: fit-content;

  &.admin {
    background: #e74c3c;
    color: #fff;
  }

  &.user {
    background: #4a90e2;
    color: #fff;
  }
}

.status-active {
  background: #27ae60;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  width: fit-content;
}

.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: #666;

  &.permission-create {
    background: #27ae60;
  }

  &.permission-read {
    background: #3498db;
  }

  &.permission-update {
    background: #f39c12;
  }

  &.permission-delete {
    background: #e74c3c;
  }

  &.permission-approve {
    background: #9b59b6;
  }

  &.permission-no_approve {
    background: #1abc9c;
  }
}

.user-edit-form {
  .form-group {
    margin-bottom: 20px;

    label {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    input, select {
      width: 100%;
      padding: 10px;
      border: 1px solid #444;
      border-radius: 4px;
      background: #333;
      color: #fff;
      font-size: 14px;

      &:focus {
        outline: none;
        border-color: #4a90e2;
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }

    .form-hint {
      color: #ccc;
      font-size: 12px;
      margin-top: 5px;
      display: block;
    }

    .change-password-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background: #3498db;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;

      &:hover {
        background: #2980b9;
      }
    }
  }
}

.permission-notice {
  background: rgba(74, 144, 226, 0.1);
  border: 1px solid rgba(74, 144, 226, 0.3);
  border-radius: 6px;
  padding: 15px;

  .notice-content {
    display: flex;
    align-items: center;
    gap: 12px;

    .notice-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .notice-text {
      flex: 1;

      p {
        margin: 0 0 5px 0;
        color: #fff;
        font-size: 14px;
        line-height: 1.4;

        strong {
          color: #4a90e2;
        }
      }

      small {
        color: #ccc;
        font-size: 12px;
      }
    }
  }
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #444;
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &.save-btn {
      background: #27ae60;
      color: #fff;

      &:hover:not(:disabled) {
        background: #229954;
      }
    }

    &.edit-btn {
      background: #4a90e2;
      color: #fff;

      &:hover {
        background: #357abd;
      }
    }

    &.cancel-btn {
      background: #666;
      color: #fff;

      &:hover {
        background: #555;
      }
    }
  }
}

// 权限管理标签页样式
.permissions-tab {
  .permissions-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;

    h4 {
      color: #fff;
      margin: 0 0 10px 0;
      font-size: 16px;
    }

    .permission-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;

      .current-permissions {
        color: #4a90e2;
        font-weight: bold;
      }

      .permission-actions {
        display: flex;
        gap: 8px;

        .action-btn {
          padding: 6px 12px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
          transition: all 0.2s;

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }

          &.select-all {
            background: #3498db;
            color: #fff;
            &:hover:not(:disabled) { background: #2980b9; }
          }

          &.clear-all {
            background: #95a5a6;
            color: #fff;
            &:hover:not(:disabled) { background: #7f8c8d; }
          }

          &.reset {
            background: #666;
            color: #fff;
            &:hover:not(:disabled) { background: #555; }
          }

          &.save {
            background: #27ae60;
            color: #fff;
            &:hover:not(:disabled) { background: #229954; }
          }
        }
      }
    }
  }

  .permissions-content {
    .role-info {
      margin-bottom: 25px;
      padding: 15px;
      background: rgba(74, 144, 226, 0.1);
      border-radius: 6px;
      border: 1px solid rgba(74, 144, 226, 0.3);

      h5 {
        color: #fff;
        margin: 0 0 10px 0;
        font-size: 14px;
      }

      .role-permissions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        .permission-tag {
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 12px;
          background: #4a90e2;
          color: #fff;

          &.role-permission {
            background: #9b59b6;
          }
        }
      }
    }

    .custom-permissions {
      h5 {
        color: #fff;
        margin: 0 0 15px 0;
        font-size: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid #444;
      }

      .permission-groups {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .permission-group {
          h6 {
            color: #fff;
            margin: 0 0 10px 0;
            font-size: 13px;
            font-weight: bold;
          }

          .permission-checkboxes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;

            .permission-checkbox {
              display: flex;
              align-items: center;
              gap: 8px;
              color: #ccc;
              cursor: pointer;
              padding: 8px 10px;
              border-radius: 6px;
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.1);
              transition: all 0.2s ease;
              user-select: none;

              &:hover {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.2);
              }

              &.permission-active {
                background: rgba(39, 174, 96, 0.1);
                border-color: rgba(39, 174, 96, 0.3);
              }

              input[type="checkbox"] {
                margin: 0;
                width: 16px;
                height: 16px;
                cursor: pointer;
                accent-color: #27ae60;
              }

              .checkbox-label {
                color: #ccc;
                font-weight: 500;
                cursor: pointer;
                flex: 1;
                font-size: 13px;
              }

              .permission-status {
                color: #27ae60;
                font-weight: bold;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}

// 自定义滚动条样式 - 与整体金色主题保持一致
.modal-backdrop {
  // 主滚动条样式
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.1);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.7) 0%, 
      rgba(74, 144, 226, 0.5) 50%, 
      rgba(74, 144, 226, 0.3) 100%
    );
    border-radius: 8px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.85) 0%, 
      rgba(74, 144, 226, 0.65) 50%, 
      rgba(74, 144, 226, 0.45) 100%
    );
    border-color: rgba(74, 144, 226, 0.4);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 4px rgba(74, 144, 226, 0.15);
  }

  ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.95) 0%, 
      rgba(74, 144, 226, 0.75) 50%, 
      rgba(74, 144, 226, 0.55) 100%
    );
    border-color: rgba(74, 144, 226, 0.6);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }

  ::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(74, 144, 226, 0.1);
  }
}

// 模态框内部滚动区域
.modal-content {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.6) 0%, 
      rgba(74, 144, 226, 0.4) 100%
    );
    border-radius: 6px;
    border: 1px solid rgba(74, 144, 226, 0.15);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.8) 0%, 
      rgba(74, 144, 226, 0.6) 100%
    );
    border-color: rgba(74, 144, 226, 0.3);
  }

  ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, 
      rgba(74, 144, 226, 0.9) 0%, 
      rgba(74, 144, 226, 0.7) 100%
    );
    border-color: rgba(74, 144, 226, 0.5);
  }
}

// 权限管理区域的滚动条
.permissions-content {
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.4);
    border-radius: 3px;
    transition: background 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 144, 226, 0.6);
  }
}

// Firefox 滚动条支持
.modal-backdrop {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.5) rgba(0, 0, 0, 0.4);
}

.modal-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.4) rgba(255, 255, 255, 0.03);
}

.permissions-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.4) rgba(0, 0, 0, 0.1);
}

// 滚动条发光动画
@keyframes userModalScrollbarGlow {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      0 2px 6px rgba(74, 144, 226, 0.25);
  }
}

// 激活时的动画效果
.modal-backdrop ::-webkit-scrollbar-thumb:active,
.modal-content ::-webkit-scrollbar-thumb:active {
  animation: userModalScrollbarGlow 0.5s ease-in-out;
}
</style>